<template>
  <div class="home-container" ref="containerRef" @wheel="handleWheel" v-loading="loading">
    <ul class="main" :style="{marginTop}" @transitionend="handleTransitionEnd">
      <li v-for="item in data" :key="item.id">
        <CarouselItem :item="item"></CarouselItem>
      </li>
    </ul>
    <div v-show="index !== 0" class="arrow arrow-up" @click="switchTo(index - 1)"><Icon type="arrowUp"></Icon></div>
    <div v-show="index !== data.length - 1" class="arrow arrow-down" @click="switchTo(index + 1)"><Icon type="arrowDown"></Icon></div>
    <ul class="indicator">
      <li v-for="(item, i) in data" :key="item.id" :class="{active: index === i}" @click="switchTo(i)"></li>
    </ul>
  </div>
</template>

<script>
import CarouselItem from "@/views/Home/modules/CarouselItem.vue";
import Icon from "@/components/Icon/index.vue";
import {getBanners} from "@/api/home/banner";
import getData from "@/mixins/getData";

export default {
  name: "Home",
  mixins: [getData([])],
  components: {Icon, CarouselItem},
  data(){
    return {
      index: 0,
      containerHeight: 0,
      switching: false,
    }
  },
  mounted() {
    this.containerHeight = this.$refs.containerRef.clientHeight
    // 监听浏览器窗口的变化
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    // 移除浏览器窗口的变化
    window.removeEventListener('resize', this.handleResize)
  },
  computed:{
    marginTop(){
      return -this.index * this.containerHeight + 'px'
    }
  },
  methods:{
    // 获取数据
    async getData(){
      return await getBanners()
    },
    switchTo(i){
      this.index = i
    },
    // 滚轮滚动事件
    handleWheel(e){
      if (this.switching){
        return
      }
      if (e.deltaY > 0 && this.index !== this.data.length - 1){
        this.switching = true
        this.index++
      }else if(e.deltaY < 0 && this.index !== 0){
        this.switching = true
        this.index--
      }
    },
    handleTransitionEnd(){
      this.switching = false
    },
    // 浏览器窗口变化事件
    handleResize(){
      this.containerHeight = this.$refs.containerRef.clientHeight
    }
  }
}
</script>
<style scoped lang="less">
@import "~@/styles/var.less";
@import "~@/styles/mixin.less";
.home-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  @arrow-margin: 20px; // 箭头的距离
  @arrow-slide-height: 10px; // 箭头滑动的高度
  @indicator-margin: 10px;
  .arrow{
    font-size: 30px;
    color: @gray;
    .self-center();
    transform: translate(0, 0);
    cursor: pointer;
  }
  .arrow-up{
    top: @arrow-margin;
    animation: slide-up 2s infinite;
  }
  @keyframes slide-up{
    0%{
      transform: translateY(-@arrow-slide-height);
    }
    50%{
      transform: translateY(@arrow-slide-height);
    }
    100%{
      transform: translateY(-@arrow-slide-height);
    }
  }
  .arrow-down{
    top: auto;
    bottom: @arrow-margin;
    animation: slide-down 2s infinite;
  }
  @keyframes slide-down{
    0%{
      transform: translateY(@arrow-slide-height);
    }
    50%{
      transform: translateY(-@arrow-slide-height);
    }
    100%{
      transform: translateY(@arrow-slide-height);
    }
  }
  .indicator{
    background-color: rgba(241, 239, 239, 0.2);
    border-radius: 16px;
    .self-center();
    left: auto;
    right: @indicator-margin;
    transform: translate(0, -50%);
    transition: all 0.3s;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    & li{
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: @words;
      border: 1px solid #ffffff;
      margin: 8px;
      cursor: pointer;
    }
    & li.active{
      background-color: #ffffff;
    }
    &:hover{
      background-color: rgba(241, 239, 239, 0.6);
      transform: translate(0, -50%) scale(1.2);
    }
  }
  .main{
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    & li {
      width: 100%;
      height: 100%;
    }
  }
}
ul{
  list-style: none;
}
</style>
